<script setup lang="ts">
import { ref, reactive, onMounted, toRaw, computed } from "vue";
interface FormItemProps {
  leader: number;
  leader_name: string;
}
interface FormProps {
  formInline: FormItemProps;
}
import { deviceDetection } from "@pureadmin/utils";
import { user_list } from "@/api/user";
import { useUserStoreHook } from "@/store/modules/user";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    leader: null,
    leader_name: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

const userList = ref([]);
const loading = ref(true);

// 选择人员
function leaderSelectClick(item) {
  newFormInline.value.leader = item.id;
  newFormInline.value.leader_name = item.nickname;
}

// 清空选择人员
function clearLeader() {
  newFormInline.value.leader = null;
  newFormInline.value.leader_name = "";
}

onMounted(async () => {
  getUserList();
});

/** 部门 */
const department_belong = computed(() => {
  return useUserStoreHook()?.department_belong;
});
// 获取用户列表
function getUserList() {
  loading.value = true;
  user_list({
    page: 1,
    pagesize: 999,
    status: "1",
    department_belong: department_belong.value,
    not_me: 1
  }).then(res => {
    userList.value = res.data;
    loading.value = false;
  });
}

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <div
    :class="[
      'flex',
      'justify-between',
      'personnel',
      deviceDetection() && 'flex-wrap'
    ]"
  >
    <div
      v-loading="loading"
      class="h-full bg-bg_color overflow-hidden relative dataContent"
    >
      <el-scrollbar height="calc(70vh - 104px)">
        <div class="dataList">
          <div class="item bt">
            <b>昵称</b>
            <b>用户名</b>
          </div>
          <div
            class="item"
            v-for="(item, index) in userList"
            :key="index"
            @click="leaderSelectClick(item)"
          >
            <p>{{ item.nickname }}</p>
            <p>{{ item.account }}</p>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="h-full selectList">
      <div class="bt">
        <p>已选择</p>
        <b @click="clearLeader">清空</b>
      </div>
      <div class="tag">
        <el-tag
          closable
          type="info"
          size="large"
          v-if="newFormInline.leader_name"
          @close="clearLeader"
        >
          {{ newFormInline.leader_name }}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.personnel {
  border: 1px solid #e5e5e5;
  margin-bottom: 16px;
}
.dataContent {
  flex: 1;
  border-right: 1px solid #eeeeee;

  .dataList {
    .item {
      display: flex;
      border-bottom: 1px solid #eeeeee;
      cursor: pointer;

      b,
      p {
        flex: 1;
        line-height: 42px;
        text-align: center;
      }
    }

    .bt {
      background: #f9fdfd;
      cursor: initial;
    }
  }
}
.selectList {
  width: 200px;
  .bt {
    display: flex;
    justify-content: space-between;
    line-height: 42px;
    border-bottom: 1px solid #eeeeee;
    padding: 0 10px;
    font-size: 13px;

    p {
      color: #8d8d8d;
    }

    b {
      cursor: pointer;
    }
  }

  .tag {
    padding: 10px;
  }
}
</style>
